import React, { useEffect, useMemo } from 'react';

import { ExclamationCircleOutlined } from '@ant-design/icons';

import type { HomeStatistics } from '@/api/homeApi';
import { useECharts } from '@/hooks/useEcharts';

import TimeRangeSelector from '../components/TimeRangeSelector';

/**
 * 告警数据接口
 */
interface WarningData {
  /** 时间字符串 */
  time: string;
  /** 告警数量 */
  value: number;
}

/**
 * 告警统计视图组件
 * 展示告警数量的时间趋势图表（面积图）
 */
const WarningView: React.FC<{
  data: HomeStatistics;
  onChange?: (value: number) => void;
}> = ({ data, onChange }) => {
  const { domRef, setOptions } = useECharts();

  /**
   * 告警统计数据
   * 将API返回的告警统计数据转换为图表所需格式
   */
  const warningData: WarningData[] = useMemo(() => {
    if (!data?.alarmStatisticsList || !Array.isArray(data.alarmStatisticsList)) {
      return [];
    }

    return data.alarmStatisticsList.map(item => ({
      time: item.dateString || '',
      value: item.msgCount || 0,
    }));
  }, [data.alarmStatisticsList]);

  // 配置图表
  useEffect(() => {
    const times = warningData.map(item => item.time);
    const values = warningData.map(item => item.value);

    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#3370FF',
            width: 1,
            type: 'dashed',
          },
        },
        formatter: function (params: any) {
          const param = params[0];
          return `${param.axisValue}<br/>${param.marker}告警数量: ${param.value}`;
        },
      },
      legend: {
        bottom: 10,
        left: 'center',
        itemWidth: 25,
        itemHeight: 14,
        itemGap: 30,
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '10%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#86909C',
          fontSize: 11,
          margin: 15,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#86909C',
          fontSize: 11,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F0F0F0',
            type: 'solid',
            width: 1,
          },
        },
      },
      series: [
        {
          name: '告警数',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#4A90E2',
            width: 2,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(74, 144, 226, 0.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(74, 144, 226, 0.05)',
                },
              ],
            },
          },
          data: values,
        },
      ],
    });
  }, [setOptions, warningData]);

  return (
    <div className="grid grid-cols-1 gap-6 my-4 pb-4">
      <div className="public-card p-6">
        <div className="mb-4 flex align-center justify-between">
          <div className="text-lg font-semibold text-gray-800">
            告警统计
            <ExclamationCircleOutlined className="text-gray-500 text-sm ml-2" />
          </div>
          <TimeRangeSelector onChange={onChange} />
        </div>
        <div ref={domRef} className="w-full h-64" style={{ minHeight: '256px' }} />
      </div>
    </div>
  );
};

export default WarningView;
